<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.Vue集成第三方动画库_掌握</title>
		<script type="text/javascript" src="./vue.js"></script>
		<link rel="stylesheet" href="./animate.min.css">
		<style>
			h1{
				background-color: orange;
				width: 150px;
			}
		</style>
	</head>
	<body>

		<div id="demo">
			<button @click="isShow = !isShow">点我切换：显示/隐藏</button>
			<transition
				enter-active-class="animate__rollIn"
				leave-active-class="animate__hinge"
			>
				<h1 class="animate__animated" v-show="isShow">你好啊！</h1>
			</transition>
		</div>

		<script type="text/javascript" >
			new Vue({
				el:'#demo',
				data:{
					isShow:true
				}
			})
		</script>
	</body>
</html>